<template>
  <view class="content">
    <view v-for="(item, index) in list" :key="index">
      <block v-if="list.length > 0">
        <view>
          <view
            class="coupon-card"
            @tap="change_coupon(item)"
          >
            <view
              class="card-money"
              :class="item.is_receive == 1 ? 'get-after' : 'get-before'"
            >
              <text
                class="text-cut"
                :class="item.money.length > 5 ? 'money-xl' : 'money-size'"
              >{{ item.money }}</text>
              <text
                class="money-scoped"
              >全场通用</text>
            </view>
            <view
              class="card-condition"
            >
              <text class="condition-use">满{{item.min_order_money}}可用</text>
              <text class="condition-time">有效期至：{{item.end_time}}</text>
            </view>
            <view class="card-action">
              <text
                class="action-btn"
                :class="item.is_receive == 1 ? 'get-after' : 'get-before'"
                @tap.stop="receive(item.id, index,item.is_receive)"
              > {{ item.is_receive === 1 ? '已领取' : '领取' }} </text>
            </view>
          </view>
        </view>
      </block>
    </view>
    <view class="flex align-center justify-center flex-direction" style="width: 100%;height: 600rpx;" v-if="list.length==0">
      <image src="/static/empty/empty05.png" mode="" style="width: 300rpx;height: 304rpx;"></image>
      <text class="text-gray margin-top">暂无可领优惠券</text>
    </view>
    <fu-notwork></fu-notwork>
    <fu-loading v-if="isShowLoading"></fu-loading>
  </view>
</template>

<script>
  var _self;
  export default {
    data() {
      return {
        isShowLoading:true,
        list: [],
        money:200,
        endTime:'2020-11-03 23:59:59',
        astrict:'满200可用',
        useScoped:'全场通用'
      };
    },
    onLoad() {
      _self = this;
      this.get_coupon_type_list();
    },
    methods: {
      // temp fn
      clickbtn(data) {
        data.that._data.statusChange = !data.that._data.statusChange
      },

      change_coupon() {},
      hange_coupon() {},
      Ishare(item) {
        item.share = !item.share
      },
      tabSelect(e) {
        this.TabCur = e.currentTarget.dataset.id;
        console.log(this.TabCur);
        this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
        console.log(this.scrollLeft);
      },
      get_coupon_type_list(value) {
        var user = uni.getStorageSync('USER_INFO');
        var data = {};
        data.method = 2
        if (user.id > 0) {
          data.user_id = user.id
        }
        if(!value){
          this.isShowLoading=true
        }
        this.$api.get(global.apiUrls.getCouponList, data).then(res => {
          this.isShowLoading=false
          if (res.data.code == 1) {
            res.data.data.forEach(item => {
              item.share = false
            })
            _self.list = res.data.data;
            console.log(_self.list)
          }
          uni.stopPullDownRefresh();
        }).catch(err=>{
         this.isShowLoading=false
        });
      },
      receive(cid, index,is_receive) {
        console.log(cid,index,is_receive)
        // 前端判断已领取得点击失效
        if(is_receive ==1){
          return false
        }
        this.$api.post(global.apiUrls.postReceiveCoupon, {
          cid: cid
        }).then(res => {
          uni.showToast({
            title: res.data.msg,
            icon: "none"
          })
          if (res.data.code == 1) {
            _self.list[index].is_receive = 1;
          }
        });
      },
      toPage: function(page) {
        uni.navigateTo({
          url: page
        });
      },
    },
    onPullDownRefresh() {
      this.get_coupon_type_list(true);
    }
  }
</script>

<style lang='scss' scoped>
.content {
  padding: 0 24rpx;
  .coupon-card {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 178rpx;
    border-radius: 20rpx;
    margin-top: 20rpx;
    background-color: #FFFFFF;
    .card-money {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex: 2;
      height: 178rpx;
      padding: 30rpx 10rpx;
      border-radius: 20rpx 0 0 20rpx;
      text-align: center;
      color: #FFFFFF;
      max-width: 211rpx;
      min-width: 211rpx;

      .money-size {
        font-size: 56rpx;
      }
      .money-xl {
        font-size: 54rpx;
      }
      .money-scoped {
        font-size: 24rpx;
      }
    }
    .card-condition {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex: 4;
      padding: 0 10rpx;
      .condition-use {
        font-size: 34rpx;
        font-weight: 700;
      }
      .condition-time {
        font-size: 24rpx;
        color: #949090;
      }
    }
    .card-action {
      display: flex;
      align-items: center;
      flex: 1;
      height: 100%;
      padding-right: 10rpx;
      .action-btn {
        height: 60rpx;
        width: 100%;
        padding: 0;
        border-radius: 20rpx;
        font-size: 24rpx;
        text-align: center;
        line-height: 60rpx;
        color: #FFFFFF;
        background: #fd100b;
      }
    }
  }
}

.get-after {
  background: #949090 !important;
}
.get-before {
  background:linear-gradient(90deg,rgb(245, 69, 45) 0%,rgb(255, 3, 3) 100%);
}
</style>
